import React, { Component } from 'react'
import { 
  QuestionWrapper,
  TitleSticky,
  StickyItem,
  QuestionLeft,
  // CenterCode,
  QuestionRight,
  QuestionList,
  ListItem
} from './style'
import {  connect } from 'react-redux'
import SideList from '../home/components/SideList'
class Question extends Component {
  render() {
    const { questionList }  = this.props
    // console.log(questionList.toJS())
    return (
      // <CenterCode>
        <QuestionWrapper>
          <QuestionLeft>
            <TitleSticky>
              <StickyItem className="active">人气问题</StickyItem>
              <StickyItem>潜力好问</StickyItem>
              <StickyItem>新问题</StickyItem>
              <StickyItem>人人答</StickyItem>
            </TitleSticky>
            <QuestionList>
              {
                questionList.map(item => {
                  return (
                  <ListItem key={item.get('id')}>
                    <p>{item.get('title')}</p>
                    <div className="item-bottom">
                      <div className="bottom-left">
                        <div className="bottom-btn">写回答</div>
                        <div>关注问题</div>
                        <div>稍后答</div>
                      </div>
                      <div className="bottom-right">
                        27个回答 · 14,041个浏览
                      </div>
                    </div>
                  </ListItem>
                  )
                })
              }
            </QuestionList>
          </QuestionLeft>
          <QuestionRight>
            <SideList />
          </QuestionRight>
        </QuestionWrapper>
      // </CenterCode>
    )
  }
}

const mapState = (state) => {
  return {
    questionList: state.getIn(['question', 'questionList'])
  }
}

export default connect(mapState, null)(Question)